import React, { Component } from 'react';
import { connect } from 'dva';
import { WinBondTypeC, PrimaryC, SecondHeaderC } from '../../../components';
import { Form } from 'antd';

class WinBondTypeC2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      t2: undefined,
      dataSource: [],
    };

    setTimeout(() => {
      this.state.WinBondTypeC1.setSelect(['a101020800']);
    }, 2000);
  }

  componentDidMount() {
    this.props
      .dispatch({
        type: 'globalM/fetchDataDictionary',
      })
      .then((res) => {
        this.changeData(res);
      });
  }

  changeData = (data) => {
    const { CREDITBND_MONITOR_BONDTYPEI = [] } = data;
    console.log(CREDITBND_MONITOR_BONDTYPEI);
    const arr = CREDITBND_MONITOR_BONDTYPEI.map((item) => ({
      title: item.value,
      value: item.code,
      children:
        item.children?.length > 0
          ? item.children.map((i) => ({
              title: i.value,
              value: i.code,
              children: [],
            }))
          : [],
    }));
    console.log('arr:', arr);
    this.setState({
      dataSource: arr,
    });
  };

  change = () => {
    this.state.WinBondTypeC2.setSelect(['a101020a00']);
  };

  ref1 = React.createRef();

  ref2 = React.createRef();

  ref3 = React.createRef();

  ref4 = React.createRef();

  render() {
    return (
      <div style={{ width: '800px', padding: '20px' }}>
        <div>
          <SecondHeaderC title='无初始化值' />
          <Form ref={this.ref1}>
            <WinBondTypeC dataSource={this.state.dataSource} form={this.ref1.current} dataIndex={'t1'} onChange={(e) => console.log(e)} />
          </Form>
        </div>
        <div className='sectionItem'>
          <SecondHeaderC title='同步加载初始化值' />
          <Form ref={this.ref2}>
            <WinBondTypeC
              form={this.ref2.current}
              dataIndex={'t11'}
              initialValue={['a101020400']}
              // isMultiple={false}
              onChange={(e) => console.log('onChange', e)}
              onSelect={(e) => console.log('onSelect', e)}
              dataSource={this.state.dataSource}
            />
          </Form>
        </div>
        <div className='sectionItem'>
          <SecondHeaderC title='异步加载初始化值' />
          <Form ref={this.ref3}>
            <WinBondTypeC
              form={this.ref3.current}
              dataIndex={'t111'}
              onChange={(e) => console.log('onChange', e)}
              onSelect={(e) => console.log('onSelect', e)}
              onRef={(ref) => {
                this.setState({ WinBondTypeC1: ref });
              }}
              dataSource={this.state.dataSource}
            />
          </Form>
        </div>
        <div className='sectionItem'>
          <SecondHeaderC title='点击按钮模拟因业务触发更改' />
          <Form ref={this.ref4}>
            <WinBondTypeC
              form={this.ref4.current}
              dataIndex={'t1141'}
              initialValue={['a101020400']}
              onChange={(e) => console.log('onChange', e)}
              onSelect={(e) => console.log('onSelect', e)}
              onRef={(ref) => {
                this.setState({ WinBondTypeC2: ref });
              }}
              dataSource={this.state.dataSource}
            />
          </Form>
          <PrimaryC onClick={this.change} title='更换选项' />
        </div>
      </div>
    );
  }
}
export default connect(({ globalM, loading }) => ({ globalM, loading }))(WinBondTypeC2);
